<?php include PATH_TPL."/admin/tpl.header.phtml"?>
<div class="main-container inner">
    <div class="main-content">
        <div class="container-fluid">
            <div class="row bt">
                <div class="col-lg-12 bg">
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa  fa-fw fa-reorder"></i>添加直播
                        </li>
                    </ol>
                </div>
            </div>
            <div id="page-wrapper">
                <div class="container-fluid col-md-7 col-sx-12">
                    <form action="/admin_live/add" method="post" enctype="multipart/form-data">
                        <div class="form-group ">
                            <label for="webinar_id">微吼活动ID</label>
                            <input type="text" placeholder="输入ID" id="webinar_id" class="form-control" name="webinar_id">
                            <button class="btn btn-primary demo_2" type="button" id="initial">初始化</button>
                        </div>
                        <div class="form-group ">
                            <label for="title">直播标题</label>
                            <input type="text" placeholder="输入直播标题" id="title" class="form-control" name="title">
                        </div>
                        <div class="form-group">
                            <label for="img">直播封面图片(宽160x高188)</label>
                            <input type="file" id="file_input" name="img">
                            <input type="hidden" id="img_net" class="form-control" name="img_net">
                        </div>
                        <div class="form-group ">
                            <label for="name">讲师名称</label>
                            <input type="text" placeholder="输入讲师名称搜索" id="name" class="form-control" name="name">
                            <input type="hidden" id="lecturer_id" class="form-control" name="lecturer_id">
                        </div>
                        <div class="form-group">
                            <label for="descriptions">直播描述</label>
                            <textarea id="descriptions" style="height: 100px" class="form-control" name="descriptions" placeholder="输入描述（选填）"></textarea>
                        </div>
                        <div class="form-group">
                            <label>直播开始时间</label>
                            <div class="input-group date datetimeStart col-md-12" data-date="<?=date('Y-m-d H-i',time())?>" data-date-format="yyyy-mm-dd hh:ii" data-link-field="start_time">
                            <input class="form-control" size="16" type="text" value="<?=date('Y-m-d H:i',strtotime(date('Y-m-d',time())) + 10*60*60)?>" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <input type="hidden" id="start_time" value="<?=date('Y-m-d H:i',strtotime(date('Y-m-d',time())) + 10*60*60)?>" name="start_time"/><br/>
                        </div>
                        <div class="form-group">
                            <label>直播结束时间</label>
                            <div class="input-group date datetimeEnd col-md-12" data-date="<?=date('Y-m-d H-i',time())?>" data-date-format="yyyy-mm-dd hh:ii" data-link-field="end_time">
                            <input class="form-control" size="16" type="text" value="<?=date('Y-m-d H:i',strtotime(date('Y-m-d',time())) + 12*60*60)?>" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <input type="hidden" id="end_time" value="<?=date('Y-m-d H:i',strtotime(date('Y-m-d',time())) + 12*60*60)?>" name="end_time"/><br/>
                        </div>
                        <div class="form-group">
                            <label style="color:red;">推送时间(默认为当前时间)</label>
                            <div class="input-group date form_date col-md-12" data-date="<?=date('Y-m-d H-i',time())?>" data-date-format="yyyy-mm-dd hh:ii" data-link-field="push_time">
                            <input class="form-control" size="16" type="text" value="<?=date('Y-m-d H:i',time())?>" readonly>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                            <input type="hidden" id="push_time" value="<?=date('Y-m-d H:i',time())?>" name="push_time"/><br/>
                        </div>

                        <button class="btn btn-primary demo_2" type="button" id="submit">添加</button>
                    </form>
                </div>
                <div class="container-fluid col-md-5">
                    <div class="images text-center" id="img_view">
                    </div>
                </div>
            </div>
        </div>
        <div class="subviews">
            <div class="subviews-container"></div>
        </div>
    </div>
    <!-- end: PAGE -->
</div>
<!-- end: MAIN CONTAINER -->
<script type-"text/javascript">
$(function(){
    $('#initial').bind('click',function(){
        var webinar_id = $('#webinar_id').val();
        if(!webinar_id){
            alert('微吼活动ID未填');
        }else{
            $.ajax({
                type: "POST",
                url: "/admin_live/getWebinar",
                data: "webinar_id="+webinar_id,
                success: function(msg){
                    var obj = JSON.parse(msg);
                    if(obj.status && obj.data.code == '200'){
                        var data = obj.data.data
                        $('#title').val(data.subject);
                        $('#descriptions').val(data.introduction);
                        var src = "http://ccstatic01.e.vhall.com/upload/"+data.img_url;
                        var img = '<img src="'+src+'" alt="" width="400px"/>';
                        $('#img_view').empty();
                        $('#img_view').append(img);
                        $('#img_net').val(src);
                    }
                }
            });
        }
    });
});
</script>
<script type="text/javascript" src="/plugins/jquery-ui-1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript" src="/plugins/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/plugins/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_date').datetimepicker({
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 0,
    format:'yyyy-mm-dd hh:ii',
    pickerPosition: "top-right",
    forceParse: 0
});
$('.datetimeStart').datetimepicker({
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 0,
    format:'yyyy-mm-dd hh:ii',
    pickerPosition: "top-right",
    forceParse: 0
}).on("click",function(ev){
    start_date = $("#end_time").val().substr(0,10);
    $(".datetimeStart").datetimepicker("setEndDate", start_date);
});
$('.datetimeEnd').datetimepicker({
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 0,
    format:'yyyy-mm-dd hh:ii',
    pickerPosition: "top-right",
    forceParse: 0
}).on("click",function(ev){
    end_date = $("#start_time").val().substr(0,10);
    $(".datetimeEnd").datetimepicker("setStartDate", end_date);
});

</script>

<script>
$(function(){
    var options={
        beforeSubmit : showRequest,    // 提交前的回调函数
        success : showResponse,    // 提交后的回调函数
        dataType : "json",    // html（默认）、xml、script、json接受服务器端返回的类型
        timeout : 3000    // 限制请求的时间，当请求大于3秒后，跳出请求
    }
    function showRequest(formData, jqForm, options){
        return true;
    }
    function showResponse(responseText,statusText){
        cg_alert_add(responseText,'/admin_live','/admin_live/add');
    }
    $('#submit').click(function() {
        $('form').ajaxSubmit(options);
        return false;

    });
});

$("#name").autocomplete({
       source:"/admin_live/lecturer",
       select:function(event,ui){
            $(this).value = ui.item.name;
            $("#lecturer_id").val( ui.item.id );
            // 必须阻止默认行为，因为autocomplete默认会把ui.item.value设为输入框的value值
            event.preventDefault();     
        },
        focus:function(event,ui){
            $(this).val(ui.item.name);
            return false;
        },
}).data("ui-autocomplete")._renderItem = function (ul, item) {//.autocomplete('instance')._renderItem...
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.name +"</a>")
            .appendTo(ul);
};

var result = document.getElementById("img_view");
var input = document.getElementById("file_input");

if(typeof FileReader==='undefined'){
   result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
   input.setAttribute('disabled','disabled');
}else{
   input.addEventListener('change',readFile,false);
}
function readFile(){
   var file = this.files[0];
   if(!/image\/\w+/.test(file.type)){
       alert("文件必须为图片！");
       return false;
   }
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function(e){
       result.innerHTML = '';
       result.innerHTML = '<img src="'+this.result+'" alt="" width="400px"/>'
   }
}
</script>
<?php include PATH_TPL."/admin/tpl.footer.phtml"?>
